<template>
    <div class="xgdpgenjiedian fl">
        <h3>请输入您要修改的店铺ID:</h3>
        <el-input
            placeholder="请输入店铺ID"
            v-model="input10"
            clearable class="sousuodp" @keyup.enter.native="a">
        </el-input>
        <div class=" listdpw">
            <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="店铺名称" prop="name">
              <el-input v-model="ruleForm.name" style="width:400px"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择商铺类型">
                <el-option label="品牌直销" value="shanghai"></el-option>
                <el-option label="个人专营" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="创建导航" prop="type">
              <el-tag
                :key="tag"
                v-for="tag in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose1(tag)"
              >{{tag}}</el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              ></el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
            </el-form-item> -->
            <div class="datuwrap">
                <h2>商铺大图：</h2>
                <img :src="'/img/'+img" alt=""></div>
            <div class="shangchuantupian">
              <h2 class="cjh">更换商铺大图:</h2>
             <el-upload
                class="upload-demo"
                ref="upload"
                action="/api/sc"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                 list-type="picture"
                :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </div>
            <el-form-item label="店铺信息" prop="desc" class="dianpuxx">
              <el-input type="textarea" v-model="ruleForm.desc" class="shurukuang"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">确定修改</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
    </div>
</template>

<script>
  export default {
    data() {
      return {
          arr:"",
          img:"",
          input10:"",
         fileList: [],
        dynamicTags: [],
        inputVisible: false,
        inputValue: "",
        dynamicTags2: [],
        inputVisible2: false,
        inputValue2: "",
        dynamicTags3: [],
        inputVisible3: false,
        inputValue3: "",
        ruleForm: {
          name: '',
          region: '',
        //   type: [],
        //   resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入商品名称', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请输入商品ID', trigger: 'blur' }
          ],
          type: [
                { required: true, message: "添加可选标签，例：尺码(规格)", trigger: "change" }
           ],
          type2: [
                { required: true, message: "添加必选标签并上传对应图片，例：颜色", trigger: "change" }
           ],
           type3: [
                { required: true, message: "添加描述性标签，可供搜索", trigger: "change" }
           ],
           type1: [
            { type: 'array', required: true, message: '请至少选择一个标签，可在店铺主页导航分类以供搜索', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填商品详细信息', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
        handleSuccess(response,file,fileList){
        console.log(response)
        this.img=response
        console.log(this.img)
      },
        a(){
            axios.post("/api/htcha",{id:this.input10}).then((data)=>{
                if(data.data){
                    this.arr=data.data[0]
                    this.ruleForm.name=this.arr.spname
                    this.ruleForm.region=this.arr.dpleixin
                    this.ruleForm.desc=this.arr.spinfo
                    this.img=this.arr.spimg
                }else{
                    this.$toast({
                        message:"查询失败，请重新输入",
                        duration:2000
                    })
                    return false
                }
            })
        },
        submitForm(formName) {
            var _this=this
              var ab = function (params) {
              let flag = true;
              for(var key in params){
                if(params[key] != '0' && !params[key]){
                  console.log('请完善数据!');
                  _this.$toast({
                message:"请完善数据",
                duration:1500
              })
                  return false; // 终止程序
                }
              }
            
              return flag;
            }
            ab(this.ruleForm)
            axios.post("/api/xiugaidps",{rul:this.ruleForm,img:this.img,spID:this.arr.spID}).then((data)=>{
                if(data.data){
                     this.$toast({
                        message:"修改成功",
                        duration:2000
                    })
                }else{
                     this.$toast({
                        message:"修改失败，请重新修改",
                        duration:2000
                    })
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
            this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = "";
        },
         handleInputConfirm2() {
        let inputValue2 = this.inputValue2;
        if (inputValue2) {
            this.dynamicTags2.push(inputValue2);
        }
        console.log(this.dynamicTags2)
        this.inputVisible2 = false;
        this.inputValue2 = "";
        },
         handleInputConfirm3() {
        let inputValue3 = this.inputValue3;
        if (inputValue3) {
            this.dynamicTags3.push(inputValue3);
        }
        this.inputVisible3 = false;
        this.inputValue3 = "";
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        showInput2() {
            this.inputVisible2 = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        showInput3() {
            this.inputVisible3 = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleClose1(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },
        handleClose2(tag) {
            this.dynamicTags2.splice(this.dynamicTags2.indexOf(tag), 1);
        },
        handleClose3(tag) {
            this.dynamicTags3.splice(this.dynamicTags3.indexOf(tag), 1);
        },
        submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>
<style>
    .datuwrap h2{
        display: inline-block;
        font-size: 12px;
        float: left;
        font-weight: 500;
    }
    .datuwrap img{
        display: inline-block;
        width: 100px;
        height: 100px;
    }
    .xgdpgenjiedian{
        width: 900px;
    }
    .sousuodp{
        width: 250px;
    }
    .listdpw{
        margin-top: 20px;
        
    }
</style>

